<template>
<div>
  <div class="commentbox">
      <img :src="picUrl" class="img">
      <div style="margin-left: 20px">
        <p style="line-height: 30px;font-size: 30px">{{songname}}</p>
        <p><span>歌手: {{singer}}</span><span style="margin-left: 20px">专辑:{{al}}</span></p>
      </div>
 </div>
  <div class="commentbox2">
    <h2 class="a"><span>全部评论</span></h2>
    <div class="commentsList" v-for="item in songsCommentsList" :Key="item">
      <img :src="item.user.avatarUrl" class="avatar">
      <div>
        <p style="line-height: 20px">{{item.user.nickname}}</p>
        <p style="line-height: 10px;word-spacing:5px">{{item.timeStr}}  {{item.ipLocation.location}}</p>
        <p >{{item.content }}</p>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import { useRoute } from "vue-router";
import {reactive, ref, toRefs, watch} from "vue";
import {useSongsStore} from "@/Store/Pinia/pinia"
import axios from "axios";
import {baseURL} from "@/request";
const route=useRoute();
const songid=ref(`${route.query.songid}`);
const songsStore=useSongsStore();
const songsCommentsList=ref([]);
const songMessage=reactive({
      picUrl: '',
      songname: '',
      singer:'',
      al:''
    });
const {picUrl,songname,singer,al}=toRefs(songMessage);
const getsongMessage=()=>{
  axios.post(baseURL+"/song/detail?ids="+songid.value).then((res)=>{ //获取歌曲详细信息
    console.log(res)
    picUrl.value=res.data.songs[0].al.picUrl;
    songname.value= res.data.songs[0].name;
    singer.value=res.data.songs[0].ar[0].name;
    al.value=res.data.songs[0].al.name;
  })
}
const getSongsComments=()=>{ //获取歌曲评论
  axios.post(baseURL+"/comment/music?id="+songid.value+"&limit=20").then((res)=>{
    console.log(res);
    songsCommentsList.value=res.data.comments;
  })
}
getsongMessage();
getSongsComments();
watch(songid.value,()=> {
  console.log(1)
  getsongMessage();
  getSongsComments();
})
</script>

<style scoped>
.commentbox{
  margin-left: 100px;
  height: 120px;
  display: flex;
}

.commentbox img{
  width: 100px;
  height: 100px;
}
.commentbox2{
  /*height: 300px;*/
  margin-left: 100px;
  height: 400px;
  margin-top: 30px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.commentsList{
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 10px;
  border-bottom:1px solid rgba(65, 105, 225, 0.09);
}

.avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

</style>